<!--
  ~ Copyright (c) 2023.
  ~
  ~ 作者：bmy
  ~ 邮箱：2271608011@qq.com
  ~ gitee：https://gitee.com/bmycode
  ~ github：https://github.com/helpcode
  ~
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,ul,li,p,a{
            font-family: "Al Bayan", serif;
            list-style: none;
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        .main {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            flex-direction: column;
            padding-top: 60px;
            box-sizing: border-box;
        }
        .main img {
            width: 150px;
            height: 150px;
        }
        .main .name {
            font-size: 18px;
            letter-spacing: 1px;
        }
        .main .desc {
            font-size: 13px;
            color: #bdbdbd;
        }

        .loading,
        .loading > div {
            position: relative;
            box-sizing: border-box;
        }

        .loading {
            display: block;
            font-size: 0;
            color: #bdbdbd;
            margin-top: 20px;
        }

        .loading.la-dark {
            color: #333;
        }

        .loading > div {
            display: inline-block;
            float: none;
            background-color: currentColor;
            border: 0 solid currentColor;
        }

        .loading > div {
            width: 10px;
            height: 10px;
            border-radius: 100%;
        }

        .loading > div:first-child {
            transform: translateX(0%);
            animation: ball-newton-cradle-left 1s 0s ease-out infinite;
        }

        .loading > div:last-child {
            transform: translateX(0%);
            animation: ball-newton-cradle-right 1s 0s ease-out infinite;
        }

        .loading.la-sm {
            width: 20px;
            height: 4px;
        }

        .loading.la-sm > div {
            width: 4px;
            height: 4px;
        }

        .loading.la-2x {
            width: 80px;
            height: 20px;
        }

        .loading.la-2x > div {
            width: 20px;
            height: 20px;
        }

        .loading.la-3x {
            width: 120px;
            height: 30px;
        }

        .loading.la-3x > div {
            width: 30px;
            height: 30px;
        }

        @keyframes ball-newton-cradle-left {
            25% {
                transform: translateX(-100%);
                animation-timing-function: ease-in;
            }

            50% {
                transform: translateX(0%);
            }
        }

        @keyframes ball-newton-cradle-right {
            50% {
                transform: translateX(0%);
            }

            75% {
                transform: translateX(100%);
                animation-timing-function: ease-in;
            }

            100% {
                transform: translateX(0%);
            }
        }


    </style>
</head>
<body>
  <div class="main" data-tauri-drag-region>
      <img src="./img/JsonToClass.png" alt="">
      <p class="name">Json To Class</p>
      <p class="desc">帮助您更快编码</p>

      <div class="loading">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
      </div>
  </div>
</body>
</html>